<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>v-for</title>
</head>
<body>
    <!-- v-for -->
    <div id="app"> 
       {{msg}}<br/>
       <!-- 直接输出对象 -->
       {{student}}<br/>
       <!-- 输出对象属性 -->
       {{student.name}}----{{student.age}}<br/>
       <hr/>
       <span v-for="stu in student">
         {{stu}}<br/>
       </span>
       <hr/>
       <!-- 使用循环遍历数组，可以使用三个参数 -->
       <span v-for="value,key,index in student">
        {{index+1}}--{{key}}--{{value}}<br/>
       </span>
    </div>

    <script>
        var vue= new  Vue({
            
            el:"#app",
            data:{
                msg:"",
                student:{
                    name:'zs',
                    age:12
                }
            },
            methods:{
               
            }
        })
    </script>
</body>
</html>